<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>颜色拾取器</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <link href="dist/css/bootstrap-colorpicker.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/img/copyright.css">
    <style type="text/css">
    .colorpicker-component {
        margin-top: 10px;
    }
    </style>
</head>

<body>
    <div class="zzsc-container">
        <div class="container" style="padding:2.5em 0;">
            <h3>最基本的颜色拾取器</h3>
            <input id="mycp" type="text" class="form-control" />
            <hr>
            <h3>为颜色拾取器设置初始颜色</h3>
            <div id="cp2" class="input-group colorpicker-component" title="Using input value">
                <input type="text" class="form-control input-lg" value="#DD0F20" />
                <span class="input-group-addon"><i></i></span>
            </div>
            <div id="cp3a" class="input-group colorpicker-component" data-color="#F18A31" title="Using data-color attribute in the colorpicker element">
                <input type="text" class="form-control input-lg" />
                <span class="input-group-addon"><i></i></span>
            </div>
            <div id="cp3b" class="input-group colorpicker-component" title="Using data-color attribute in the input">
                <input type="text" class="form-control input-lg" data-color="#F8EB48" />
                <span class="input-group-addon"><i></i></span>
            </div>
            <div id="cp4" class="input-group colorpicker-component" title="Using color option">
                <input type="text" class="form-control input-lg" />
                <span class="input-group-addon"><i></i></span>
            </div>
            <hr>
            <h3>设置颜色的格式</h3>
            <div id="cp5" class="input-group colorpicker-component" title="Using format option">
                <input type="text" class="form-control input-lg" value="#305AA2" />
                <span class="input-group-addon"><i></i></span>
            </div>
            <hr>
            <h3>水平模式</h3>
            <div id="cp6" class="input-group colorpicker-component" title="Using horizontal option">
                <input type="text" class="form-control input-lg" value="#6D2781" />
                <span class="input-group-addon"><i></i></span>
            </div>
            <hr>
            <h3>禁用alpha通道</h3>
            <div id="cp9" class="input-group colorpicker-component">
                <input type="text" class="form-control input-lg" value="rgba(248, 235, 72, 0.5)" />
                <span class="input-group-addon"><i></i></span>
            </div>
            <hr>
            <h3>禁用十六进制颜色值前缀</h3>
            <div id="cp10" class="input-group colorpicker-component">
                <input type="text" class="form-control input-lg" value="#16813d" />
                <span class="input-group-addon"><i></i></span>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="dist/js/bootstrap-colorpicker.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#mycp').colorpicker();
    });
    $(function() {
        $('#cp2, #cp3a, #cp3b').colorpicker();
        $('#cp4').colorpicker({ "color": "#16813D" });
        $('#cp5').colorpicker({
            format: "rgba"
        });
        $('#cp6').colorpicker({
            horizontal: true
        });
        $('#cp9').colorpicker({
            useAlpha: false
        });
        $('#cp10').colorpicker({
            useHashPrefix: false
        });
    });
    </script>
    <div id="footer">Copyright 2018 www.rcxserver.top All Rights Reserved. <a style="color: yellow" href="http://github.com/renchangxu/sitesource">Github</a></div>
</body>

</html>